<template>
	<view class="container">
		<view class="moneyBox">
			<view class="item active">
				<view class="center">
					<view class="coin">
						5千金币
					</view>
					<view class="money">
						5元
					</view>
				</view>

			</view>
			<view class="item">
				<view class="center">
					<view class="coin">
						1万金币
					</view>
					<view class="money">
						10元
					</view>
				</view>

			</view>
			<view class="item">
				<view class="center">
					<view class="coin">
						2万金币
					</view>
					<view class="money">
						20元
					</view>
				</view>

			</view>
			<view class="item">
				<view class="center">
					<view class="coin">
						5万金币
					</view>
					<view class="money">
						50元
					</view>
				</view>

			</view>
			<view class="item">
				<view class="center">
					<view class="coin">
						10万金币
					</view>
					<view class="money">
						100元
					</view>
				</view>

			</view>
			<view class="item">
				<view class="center">
					<view class="coin">
						50万金币
					</view>
					<view class="money">
						500元
					</view>
				</view>

			</view>
		</view>
		<view class="tit">
			支付方式
		</view>
		 <view class="payStyle">
		 	<view class="wxStyle">
		 		<image src="../../../static/images/wx-icon.png" mode=""></image>
				<text>微信支付</text>
		 	</view>
			<text class="iconfont iconduihao2 active"></text>
		 </view>
		 <view class="payBtn">
		 	确认充值
		 </view>
		 <view class="tips">
		 	提示：充值的金币仅用于发布任务，如进行提现将按照一万金币等于1元的比例进行提现。
		 </view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {}
		},
		onReady() {},
		methods: {},
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.container {
		padding: 32rpx 28rpx;

		.moneyBox {
			display: grid;
			grid-template-columns: 216rpx 216rpx 216rpx;
			grid-template-rows: 154rpx 154rpx;
			column-gap: 16rpx;
			row-gap: 15rpx;
			padding: 0 8rpx;
			margin-bottom: 32rpx;
			text-align: center;
			.item {
				display: flex;
				border: 2rpx solid #dbdbdb;
				border-radius: 6rpx;
				align-items: center;
				text-align: center;
				&.active {
					border-color: #e23a28;
				}
				.center {
					width: 100%;
					.coin {
						margin-bottom: 25rpx;
						font-size: 28rpx;
						color: #000;
						font-weight: bold;
					}
					.money {
						font-size: 24rpx;
						color: #7b7b7b;
					}
				}
			}
		}
		.tit {
			width: 100%;
			height: 102rpx;
			line-height: 102rpx;
			border-bottom: 1px solid #DBDBDB;
			font-size: 26rpx;
			color: #5c5c5c;
		}
		.payStyle {
			width: 100%;
			height: 98rpx;
			margin-bottom: 56rpx;
			display: flex;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			-ms-flex-pack: justify;
			justify-content: space-between;
			align-items: center;
			line-height: 98rpx;
			border-bottom: 1px solid #DBDBDB;
			.wxStyle {
				image {
					width: 44rpx;
					height: 44rpx;
					vertical-align: middle;
				}
				text {
					padding-left: 25rpx;
					font-size: 28rpx;
					color: #000;
				}
			}
			.iconfont {
				font-size: 44rpx;
				color: #999;
				&.active {
					color: #fc4250;
				}
			}
		}
		.payBtn {
			width: 654rpx;
			height: 100rpx;
			margin: 0 auto 60rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			background: linear-gradient(to right, #ff3756, #ee794a);
			box-shadow: 0 15rpx 10rpx rgba($color: #ff3756, $alpha: .20);
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}
		.tips {
			font-size: 24rpx;
			color: #757575;
		}
	}
</style>
